<template>

    <el-dialog
        v-model="props.dialogVisible"
        title="余额变动日志"
        width="70%"
        @open="open"
        :before-close="close"
    >
        <el-table :data="tableData" border style="width: 100% ;height:500px">
            <el-table-column prop="id" label="ID" width="180"/>
            <el-table-column prop="money" label="变更余额" width="180"/>
            <el-table-column prop="before" label="变更前余额" width="180"/>
            <el-table-column prop="after" label="变更后余额" width="180"/>
            <el-table-column prop="memo" label="备注" width="180"/>
            <el-table-column prop="type" label="类型" width="180">
                <template #default="{row}">
                    <span v-if="row.type == 1">增加</span>
                    <span v-else>减少</span>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间"/>
        </el-table>
        <el-pagination style="margin-top: 10px" background layout="prev, pager, next" :total="total"/>


        <template #footer>
            <div class="dialog-footer">
                <el-button @click="close()">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {log} from "/@/api/backend/extend";
import Template from "/@/lang/backend/en/sms/template";

const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    row: {
        type: Object,
        default: {}
    },
})

const tableData = ref();
const total = ref();
const open = () => {
    log({user_id: props.row.id}).then(res => {
        console.log("res", res)
        tableData.value = res.data.list
        total.value = res.data.total
    })
}

const emit = defineEmits(['close'])
const close = () => {
    emit('close')
}

</script>
